fix(apollo-react): add accessible name to toolbox search clear button [MST-12402] by BenHorblit-UiPath · Pull Request #930 · UiPath/apollo-ui

BenHorblit-UiPath · 2026-07-18T04:15:52Z

Important

🦾 Part of the Case Management accessibility effort automated burndown

The icon-only "clear" button in the canvas Toolbox search field has no accessible name. Its only child is an aria-hidden "x" icon and it carries no aria-label, so screen readers announce it as an unnamed "button" — a WCAG 2.1 SC 4.1.2 (Name, Role, Value) failure.

The fix adds an optional clearButtonAriaLabel prop to SearchBox (default 'Clear search'), applied as the button's aria-label, and has Toolbox supply a localized value through the package's existing LinguiJS pattern. The default keeps any direct SearchBox consumer accessible even without passing the prop, so it's fixed at the source and covers every reuse of the component.

Changes

SearchBox.tsx: new optional clearButtonAriaLabel?: string prop (default 'Clear search'), rendered as aria-label on <button className="searchbox-clear">.
Toolbox.tsx: clearSearchLabel = _({ id: 'toolbox.search.clear', message: 'Clear search' }) (mirrors the existing searchPlaceholder line via useSafeLingui) passed to SearchBox.
SearchBox.test.tsx: new co-located Vitest suite asserting the clear button's accessible name (default and custom), and that it isn't rendered when the field is empty.
src/canvas/locales/en.json: added source string "toolbox.search.clear": "Clear search" (English source only — matches how prior canvas keys were added, e.g. commit f26195f5; the localization pipeline fills the other locales, and the baked-in message default renders English until then).

Verification

Checked in this repo's Storybook and scanned with axe-core 4.11.0 (the same engine @storybook/addon-a11y uses), on story Apollo React/Canvas/Components/Controls/Toolbox → Default with the search field populated so the clear button renders.

	Before (base `main`)	After (this branch)
axe `button-name` on `.searchbox-clear`	1 critical violation — "Buttons must have discernible text… aria-label attribute does not exist or is empty."	0 violations, 1 pass
Chrome accessibility tree	`button` with no accessible name	`button "Clear search"`

This change adds only an aria-label, so there is no visual delta to show — the accessibility-tree and axe results above are the proof.

The only behavioral change is an added aria-label; no layout or visual impact. The new prop is additive and optional with a safe default — no breaking change.

Resolves

MST-12402 — canvas Toolbox search clear button has no accessible name
MST-12445 — same clear button, pinned to .searchbox-clear by a live DOM probe
MST-12420 — partial: only the clear-button half of that ticket; its other half (an unnamed trash button on the task title row) is fixed locally in PO.Frontend#6507

🤖 Generated with Claude Code

github-actions · 2026-07-18T04:16:01Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jul 17, 2026, 09:21:26 PM
apollo-docs	🟢 Ready	Preview, Logs	Jul 17, 2026, 09:21:26 PM
apollo-landing	🟢 Ready	Preview, Logs	Jul 17, 2026, 09:21:26 PM
apollo-vertex	🟢 Ready	Preview, Logs	Jul 17, 2026, 09:21:26 PM

github-actions · 2026-07-18T04:16:42Z

Dependency License Review

✅ 1950 package(s) scanned
✅ No license issues found
⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1720
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.3.2	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

Copilot

Pull request overview

Improves Canvas toolbox search accessibility by giving the icon-only “clear” button a stable accessible name, while keeping the change additive and localized for Toolbox.

Changes:

Added clearButtonLabel?: string to SearchBox with a safe default ("Clear search"), applied via aria-label on the clear button.
Updated Toolbox to pass a localized clear-label using the existing useSafeLingui pattern and a new toolbox.search.clear message id.
Added Vitest coverage to assert the clear button’s accessible name (default + custom) and that the button is not rendered when the input is empty.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
packages/apollo-react/src/canvas/locales/en.json	Adds the `toolbox.search.clear` English source string used by Toolbox.
packages/apollo-react/src/canvas/components/Toolbox/Toolbox.tsx	Provides a localized clear-button label to `SearchBox`.
packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx	Introduces `clearButtonLabel` prop and wires it to `aria-label` on the clear button.
packages/apollo-react/src/canvas/components/Toolbox/SearchBox.test.tsx	Adds tests asserting the button’s accessible name behavior and conditional rendering.

github-actions · 2026-07-18T04:21:44Z

📊 Coverage + size by package

Per-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.

Package	Coverage	New-line coverage	Packed (gzip)	Unpacked	vs main
`@uipath/apollo-core`	—	—	43.84 MB	57.45 MB	±0
`@uipath/apollo-react`	39.1%	100.0% (1/1)	7.51 MB	28.87 MB	+84 B
`@uipath/apollo-wind`	—	—	420.6 KB	2.73 MB	+25 B
`@uipath/ap-chat`	85.8%	—	43.46 MB	56.05 MB	+37 B

_{"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.}

github-actions · 2026-07-29T00:17:20Z

Apollo Coded App preview deployments are ready.

Project	Status	Preview	Updated (PT)
apollo-design	Ready	Preview · Logs	Aug 07, 2026, 04:07:20 PM
apollo-docs	Ready	Preview · Logs	Aug 07, 2026, 04:07:20 PM
apollo-landing	Ready	Preview · Logs	Aug 07, 2026, 04:07:20 PM
apollo-vertex	Ready	Preview · Logs	Aug 07, 2026, 04:07:20 PM

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Suppressed comments (2)

packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx:79

clearButtonLabel can be passed as an empty/whitespace string, which would make aria-label empty again and reintroduce the unnamed-button accessibility issue. Consider falling back to the default label when the provided value is blank.

            aria-label={clearButtonLabel}

packages/apollo-react/src/canvas/components/Toolbox/SearchBox.test.tsx:28

The "no value" test queries for a button with the specific accessible name. If the label changes in the future, the test could pass even if the clear button is mistakenly rendered (but with a different name). Since SearchBox only renders a single <button> (the clear button), asserting no button role is present is more robust.

    render(<SearchBox {...baseProps} value="" />);

    expect(screen.queryByRole('button', { name: 'Clear search' })).not.toBeInTheDocument();

Addresses review feedback on #930: the prop is applied verbatim as the clear button's aria-label, so the name now says so. Purely a rename -- the default value, behaviour and rendered output are unchanged. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CuHYHyfQmL25YEEtZNYR5K

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

…tonAriaLabel Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

github-actions · 2026-08-07T23:23:03Z

Storybook visual diff

⚠️ Visual changes detected: 6 changed (of 300 compared, 294 unchanged). View report

Baseline is the deployed main Storybook, so changes merged to main after this branch was last updated can also appear here. Logs

Updated (PT): Aug 07, 2026, 04:23:03 PM

Copilot AI lite review requested due to automatic review settings July 18, 2026 04:15

github-actions Bot added pkg:apollo-react size:M 30-99 changed lines. labels Jul 18, 2026

Copilot started reviewing on behalf of BenHorblit-UiPath July 18, 2026 04:16 View session

Copilot AI reviewed Jul 18, 2026

View reviewed changes

BenHorblit-UiPath marked this pull request as ready for review July 18, 2026 04:21

Copilot AI review requested due to automatic review settings July 29, 2026 00:17

BenHorblit-UiPath force-pushed the fix/a11y-searchbox-clear-label branch from d310992 to f4f31e1 Compare July 29, 2026 00:17

Copilot started reviewing on behalf of BenHorblit-UiPath July 29, 2026 00:17 View session

Copilot AI reviewed Jul 29, 2026

View reviewed changes

fix(apollo-react): add accessible name to toolbox search clear button

4421183

Copilot AI review requested due to automatic review settings July 31, 2026 04:19

BenHorblit-UiPath force-pushed the fix/a11y-searchbox-clear-label branch from f4f31e1 to 4421183 Compare July 31, 2026 04:19

Copilot started reviewing on behalf of BenHorblit-UiPath July 31, 2026 04:19 View session

Copilot AI reviewed Jul 31, 2026

View reviewed changes

kittyyueli approved these changes Aug 7, 2026

View reviewed changes

kittyyueli reviewed Aug 7, 2026

View reviewed changes

Comment thread packages/apollo-react/src/canvas/components/Toolbox/SearchBox.tsx Outdated

Copilot AI review requested due to automatic review settings August 7, 2026 22:49

Copilot AI reviewed Aug 7, 2026

BenHorblit-UiPath force-pushed the fix/a11y-searchbox-clear-label branch from 6d24826 to d310992 Compare August 7, 2026 22:59

Copilot AI review requested due to automatic review settings August 7, 2026 22:59

Copilot AI reviewed Aug 7, 2026

BenHorblit-UiPath force-pushed the fix/a11y-searchbox-clear-label branch from d310992 to 4421183 Compare August 7, 2026 23:00

refactor(apollo-react): rename SearchBox clearButtonLabel to clearBut…

300f19e

…tonAriaLabel Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings August 7, 2026 23:03

Copilot AI reviewed Aug 7, 2026

BenHorblit-UiPath enabled auto-merge (rebase) August 7, 2026 23:50

CalinaCristian approved these changes Aug 7, 2026

View reviewed changes

BenHorblit-UiPath merged commit 3bac25b into main Aug 7, 2026
44 of 45 checks passed

BenHorblit-UiPath deleted the fix/a11y-searchbox-clear-label branch August 7, 2026 23:56

Navigation Menu

Uh oh!

fix(apollo-react): add accessible name to toolbox search clear button [MST-12402] - #930

fix(apollo-react): add accessible name to toolbox search clear button [MST-12402]#930
BenHorblit-UiPath merged 2 commits into
mainfrom
fix/a11y-searchbox-clear-label

BenHorblit-UiPath commented Jul 18, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 18, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 18, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions Bot commented Jul 18, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 29, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions Bot commented Aug 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

BenHorblit-UiPath commented Jul 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Verification

Resolves

Uh oh!

github-actions Bot commented Jul 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dependency License Review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

github-actions Bot commented Jul 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Coverage + size by package

Uh oh!

github-actions Bot commented Jul 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Aug 7, 2026

Storybook visual diff

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

BenHorblit-UiPath commented Jul 18, 2026 •

edited

Loading

github-actions Bot commented Jul 18, 2026 •

edited

Loading

github-actions Bot commented Jul 18, 2026 •

edited

Loading

github-actions Bot commented Jul 18, 2026 •

edited

Loading

github-actions Bot commented Jul 29, 2026 •

edited

Loading